<!DOCTYPE html>
<html lang="en" id="iamtsm">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tl-rtc-file</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/index.min.css" media="all">
    <link rel="stylesheet" href="/css/comm.min.css" media="all">
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css" media="all">
    <script type="text/javascript" src="/static/js/swiper-bundle.min.js"></script>
    <script type="text/javascript" src="/static/js/socket.io.js"></script>
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/axios.js"></script>
    <script type="text/javascript" src="/static/js/clipboard.min.js"></script>
    <link href="/image/44826979.png" rel="shortcut icon" type="image/x-icon">

    <script>
        window.Bus = new Vue({});
        window.prefix = "";
    </script>
    <style>
        .layui-layedit {
            border: none;
            border-radius: 20px;
            box-shadow: 0 0px 20px rgb(0 0 0 / 40%);
        }
        .new-dot{
            padding: 0px 3px;
            position: absolute;
            border-radius: 50%;
            height: 18px;
            width: 18px;
            font-size: 10px;
            line-height: 18px;
            right: -5px;
        }
    </style>
</head>
<body>
    
    <div class="verticalPannel">
        <iframe frameborder="0" scrolling="no" src="./vertical.html" width="100%" height="30px"></iframe>
    </div>

    <div id="fileApp" v-cloak>
        <div class="tool">

            <a title="赞赏一杯咖啡" @click="coffee">
                <svg style="width: 24px;height: 24px;margin-right: 10px;" viewBox="0 0 1107 1024" p-id="3119" width="64"
                    height="64">
                    <path
                        d="M553.246655 937.184243c238.524101 0 431.949107-141.811598 431.949107-405.014926 0-26.808906-2.004404-53.868363-5.887938-80.92782H552.870829"
                        fill="#E2E2E2" p-id="3120"></path>
                    <path
                        d="M557.506014 591.675067h426.436995c0.626376-10.272572 2.254955-33.072669 2.254955-43.721067 0-26.808906-2.004404-53.868363-5.887937-80.927819H557.506014"
                        fill="#AD8482" p-id="3121"></path>
                    <path d="M553.747756 1006.461463c198.811842 0 383.342305-22.800098 536.178126-80.92782H557.506014"
                        fill="#D8D8D8" p-id="3122"></path>
                    <path
                        d="M976.551769 769.06484h-46.101297c-9.646195 0-17.538537-7.892342-17.538537-17.538537s7.892342-17.538537 17.538537-17.538537h46.101297c52.490335 0 95.2092-42.718865 95.2092-95.2092 0-49.98483-33.448495-87.692684-77.670664-87.692684-9.646195 0-17.538537-7.892342-17.538536-17.538537s7.892342-17.538537 17.538536-17.538537c30.567164 0 58.879374 12.402251 79.925618 34.951799 21.171519 22.674823 32.822119 53.868363 32.822119 87.817959 0 71.782726-58.378273 130.286274-130.286273 130.286274z"
                        fill="" p-id="3123"></path>
                    <path
                        d="M219.88918 476.29655c-3.006606 24.178126-4.635185 48.481527-4.635185 72.534377 0 236.018596 151.332518 363.298263 337.99266 363.298263s337.99266-127.279667 337.99266-363.298263c0-24.052851-1.628578-48.356252-4.635185-72.534377H219.88918z"
                        fill="#FFFFFF" p-id="3124"></path>
                    <path
                        d="M896.626151 591.675067c3.632983-9.771471 7.14069-33.197945 8.142892-43.721067 2.505505-26.558356 4.635185-53.868363 1.378028-80.927819H189.823117c0.501101 26.43308-0.751652 54.244189 2.63078 80.927819 3.382432 25.806704 5.261561 33.57377 5.762662 43.721067h698.409592z"
                        fill="#D3B1AB" p-id="3125"></path>
                    <path
                        d="M553.246655 954.72278c-61.760705 0-120.138977-9.145094-173.75679-27.184733-54.74529-18.415464-102.850991-45.725471-143.189626-80.927819-86.690482-75.791534-132.541228-184.530462-132.541228-314.440911 0-27.310007 2.004404-55.371666 6.013213-83.433325 1.252753-8.643993 8.643993-15.033032 17.413261-15.033031h852.122339c8.769268 0 16.160509 6.389038 17.413262 15.033031 4.008808 28.061659 6.013213 56.123318 6.013213 83.433325 0 129.910448-45.850746 238.649376-132.541229 314.440911-40.338635 35.327624-88.569611 62.512356-143.189625 80.927819-53.617813 18.039638-112.12136 27.184732-173.75679 27.184733zM142.594343 468.780034c-2.505505 21.296795-3.758258 42.593589-3.758258 63.389283 0 235.392219 162.607291 387.476389 414.41057 387.476389 251.678003 0 414.41057-152.084169 414.41057-387.476389 0-20.795694-1.252753-41.967213-3.758258-63.389283H142.594343z"
                        fill="" p-id="3126"></path>
                    <path d="M551.743352 927.913873c131.288476 0 248.796672-42.969415 328.095914-125.525813h-326.968437"
                        fill="#AD8482" p-id="3127"></path>
                    <path
                        d="M283.904839 788.607781c64.642036 82.431123 160.728162 139.306092 267.963788 139.306092s203.196477-56.749694 267.963788-139.306092H283.904839z"
                        fill="#D3B1AB" p-id="3128"></path>
                    <path
                        d="M553.747756 945.45241c-138.679716 0-259.69562-46.477123-340.748716-130.91265-4.259359-4.384634-5.887937-10.773673-4.259358-16.66161s6.138488-10.648397 12.1517-12.276976c0.125275 0 2.881331-0.876927 7.767066-2.129679 27.184732-7.14069 97.965256-23.677025 165.488623-23.677025 43.219966 0 64.642036 6.764864 85.437729 13.404453 19.04184 6.013213 37.081478 11.650599 74.789332 11.6506s55.747492-5.637387 74.914608-11.6506c20.795694-6.514314 42.468314-13.404453 85.563004-13.404453 75.290433 0 148.075361 20.545143 162.983117 25.055053h3.883534c7.015415 0 13.404453 4.134084 16.160508 10.648397 2.756056 6.514314 1.378028 13.905554-3.507707 19.04184-80.92782 84.435527-201.943724 130.91265-340.62344 130.91265zM260.979466 811.658429c73.536579 63.890384 176.262295 98.716907 292.76829 98.716907 116.130169 0 218.354783-34.575973 291.891363-97.83998-28.938586-7.14069-79.925618-17.663812-130.6621-17.663812-37.833129 0-55.872767 5.637387-75.039882 11.775875-20.795694 6.514314-42.343039 13.279178-85.43773 13.279178-43.09469 0-64.51676-6.764864-85.312454-13.279178-19.167115-6.013213-37.206753-11.775875-74.914607-11.775875-49.233178 0-101.723514 9.771471-133.29288 16.786885zM875.830457 621.74113c-41.967213 0-64.015659-6.764864-85.187179-13.279177-19.918767-6.138488-38.710056-11.775875-76.292635-11.775875-37.457304 0-55.622217 5.762662-74.914607 11.775875-20.920969 6.514314-42.593589 13.279178-85.187179 13.279177s-64.391485-6.764864-85.437729-13.279177c-19.417666-6.013213-37.707854-11.775875-75.165158-11.775875-37.332028 0-55.622217 5.637387-74.914608 11.775875-21.046244 6.514314-42.718865 13.279178-85.437729 13.279177-84.184977 0-117.633472-26.18253-121.141179-29.189136-3.632983-3.131882-5.887937-7.516516-6.138488-12.276976-0.626376-10.898948-1.002202-21.797896-1.002202-32.321018 0-27.184732 2.004404-54.620015 6.013212-98.716907 0.751652-9.019819 8.393443-16.035234 17.413262-16.035233h852.122339c9.019819 0 16.66161 6.890139 17.413262 16.035233 4.008808 44.096893 6.013213 71.532175 6.013212 98.716907 0 7.516516-0.626376 14.531931-1.378028 21.42207-0.375826 3.758258-0.751652 7.391241-0.876926 10.898948-0.250551 4.76046-2.505505 9.145094-6.138488 12.276976-3.632983 2.881331-36.705652 29.189136-119.763152 29.189136z m-161.605089-60.132126c42.84414 0 65.143137 6.764864 86.565207 13.404453 19.668216 6.013213 38.208955 11.650599 75.039882 11.6506 52.114509 0 80.301444-11.650599 91.325667-17.538537 0.125275-1.002202 0.250551-2.129679 0.25055-3.131882 0.626376-6.263763 1.127477-12.276976 1.127478-18.039638 0-22.549547-1.503303-45.600196-4.384634-79.675067H144.348196c-2.881331 34.074872-4.384634 57.12552-4.384634 79.675067 0 6.890139 0.125275 14.030829 0.501101 21.296795 11.400049 6.013213 40.088084 17.538537 92.703695 17.538537 37.457304 0 55.747492-5.637387 75.039882-11.775875 20.920969-6.514314 42.718865-13.279178 85.43773-13.279178s64.51676 6.764864 85.563004 13.279178c19.417666 6.013213 37.707854 11.775875 74.914608 11.775875 37.332028 0 55.496942-5.637387 74.664056-11.775875 21.046244-6.639589 42.718865-13.404453 85.43773-13.404453z m269.717641 17.538537z"
                        fill="" p-id="3129"></path>
                    <path
                        d="M268.120156 925.533643c81.428921 58.127722 179.770002 80.92782 285.6276 80.92782s204.198679-22.800098 285.6276-80.92782H268.120156z"
                        fill="#FFFFFF" p-id="3130"></path>
                    <path
                        d="M553.747756 1024c-104.103744 0-200.941522-6.389038-287.757279-18.791289C171.658204 991.553707 85.969924 970.256912 11.305867 941.944703c-7.892342-3.006606-12.527526-11.274774-11.024223-19.542941 1.503303-8.268167 8.769268-14.406655 17.287986-14.406656h1072.356252c8.518718 0 15.659408 6.013213 17.287986 14.406656 1.503303 8.268167-3.131882 16.536335-11.024223 19.542941-74.664057 28.312209-160.352337 49.609004-254.559335 63.138732-86.941033 12.527526-183.778811 18.916565-287.882554 18.916565z m-421.676535-80.92782c119.637876 30.441889 260.823098 45.850746 421.676535 45.850746 160.853438 0 302.038659-15.408857 421.676535-45.850746H132.071221zM324.118199 355.781747c-2.254955 0-43.470516-0.375826-71.782726-28.688035-17.162711-17.162711-25.931979-40.213359-25.931979-68.77612 0-47.6046 24.178126-70.279423 45.600195-90.323464 19.292391-18.164913 34.575973-32.446293 34.575973-65.017862 0-26.558356-9.896746-45.22437-30.191338-57.000244-16.285784-9.52092-33.448495-10.898948-33.573771-10.898948-9.646195-0.626376-16.912161-8.894544-16.411059-18.540739 0.626376-9.646195 9.019819-17.037436 18.666014-16.41106 2.505505 0.125275 24.679227 1.879129 47.6046 14.782481 22.424272 12.652802 48.982628 38.08368 48.982628 88.06851 0 47.85515-24.303401 70.529973-45.725471 90.699291-19.292391 18.039638-34.450697 32.321018-34.450698 64.767311 0 25.931979 9.646195 43.595792 29.439687 53.868363 16.160509 8.268167 33.072669 8.518718 33.197945 8.518718 9.646195 0 17.413262 7.767066 17.538537 17.538536 0 9.52092-7.892342 17.413262-17.538537 17.413262zM863.678757 355.781747c-2.254955 0-43.470516-0.375826-71.782726-28.688035-17.162711-17.162711-25.931979-40.213359-25.93198-68.77612 0-47.6046 24.178126-70.279423 45.600196-90.323464 19.292391-18.164913 34.575973-32.446293 34.575973-65.017862 0-26.558356-9.896746-45.22437-30.191339-57.000244-16.285784-9.52092-33.448495-10.898948-33.57377-10.898948-9.646195-0.626376-16.912161-8.894544-16.41106-18.540739 0.626376-9.646195 8.894544-17.037436 18.666015-16.41106 2.505505 0.125275 24.679227 1.879129 47.6046 14.782481 22.424272 12.652802 48.982628 38.08368 48.982627 88.06851 0 47.85515-24.303401 70.529973-45.725471 90.699291-19.292391 18.039638-34.450697 32.321018-34.450697 64.767311 0 25.931979 9.646195 43.595792 29.439687 53.868363 16.160509 8.268167 33.072669 8.518718 33.197945 8.518718 9.646195 0 17.413262 7.767066 17.538536 17.538536 0 9.52092-7.892342 17.413262-17.538536 17.413262zM593.83584 355.781747c-2.254955 0-43.470516-0.375826-71.782726-28.688035-17.162711-17.162711-25.931979-40.338635-25.931979-68.77612 0-47.6046 24.178126-70.279423 45.600196-90.323464 19.292391-18.164913 34.575973-32.446293 34.575972-65.017862 0-26.934182-10.147296-45.725471-31.19354-57.626621-16.035234-9.019819-32.446293-10.272572-32.571569-10.272571-9.646195-0.626376-17.037436-8.894544-16.411059-18.540739 0.626376-9.646195 8.894544-17.037436 18.540739-16.41106 2.505505 0.125275 24.679227 1.879129 47.6046 14.782481 22.424272 12.527526 49.107903 38.08368 49.107903 88.06851 0 47.85515-24.303401 70.529973-45.725471 90.699291-19.292391 18.039638-34.450697 32.321018-34.450697 64.767311 0 18.791289 5.261561 33.57377 15.659407 43.846342C565.02253 320.328848 593.710565 320.704673 593.83584 320.704673c9.646195 0 17.538537 7.767066 17.538537 17.538537 0 9.646195-7.767066 17.538537-17.538537 17.538537z"
                        fill="" p-id="3131"></path>
                </svg>
            </a>

            <a title="分享房间链接" @click="shareUrl" id="shareUrl" v-show="switchData.openShareRoom">
                <svg viewBox="0 0 1024 1024" style="width: 24px;height: 24px;margin-right: 10px;" p-id="3083"
                    width="128" height="128">
                    <path
                        d="M512 1024C229.228 1024 0 794.772 0 512S229.228 0 512 0s512 229.228 512 512-229.228 512-512 512z m54.545-565.02l-1.798-1.764a102.207 102.207 0 0 0-11.002-9.523l-35.453 35.442c4.176 2.446 8.078 5.393 11.605 8.92l1.866 1.763a58.277 58.277 0 0 1 0 82.341l-96.904 96.882a58.334 58.334 0 0 1-82.341 0l-1.832-1.798a58.243 58.243 0 0 1 0-82.306l43.816-43.828a149.675 149.675 0 0 1-10.866-58.732l-67.812 67.72c-41.836 41.825-41.836 110.251 0 152.053l1.787 1.798c41.836 41.79 110.228 41.79 152.052 0l96.882-96.916c41.757-41.825 41.757-110.25 0-152.052z m141.38-141.37l-1.82-1.797c-41.802-41.825-110.228-41.825-152.053 0l-96.882 96.916c-41.824 41.79-41.824 110.216 0 152.053l1.798 1.763c3.505 3.425 7.225 6.576 11.002 9.523l35.454-35.476a57.845 57.845 0 0 1-11.583-8.92l-1.798-1.763a58.311 58.311 0 0 1 0-82.375l96.905-96.882a58.197 58.197 0 0 1 82.284 0l1.798 1.797a58.277 58.277 0 0 1 0 82.341l-43.76 43.828c7.612 18.796 11.196 38.81 10.844 58.766l67.789-67.755c41.824-41.79 41.824-110.216 0.022-152.007z"
                        p-id="3084" fill="#707070"></path>
                </svg>
            </a>

            <a title="博客" href="https://blog.iamtsm.cn" target="_blank">
                <svg style="width: 24px;height: 24px;margin-right: 10px;" viewBox="0 0 1024 1024" p-id="4914"
                    width="128" height="128">
                    <path d="M512 520m-480 0a480 480 0 1 0 960 0 480 480 0 1 0-960 0Z" fill="#F8C5B9" p-id="4915">
                    </path>
                    <path
                        d="M512 1020c-276 0-500-224-500-500S236 20 512 20s500 224 500 500-224.8 500-500 500z m0-960C258.4 60 52 266.4 52 520s206.4 460 460 460 460-206.4 460-460S765.6 60 512 60z"
                        p-id="4916"></path>
                    <path
                        d="M277.6 276c5.6 0.8 9.6-4 8.8-9.6-8-46.4-43.2-227.2-100-237.6C132 18.4 12.8 137.6 32 189.6c20.8 56 200 80.8 245.6 86.4z"
                        fill="#F8C5B9" p-id="4917"></path>
                    <path
                        d="M278.4 296h-3.2c-88-10.4-238.4-37.6-261.6-99.2C-0.8 158.4 32 112 52.8 87.2 89.6 44 148 1.6 189.6 9.6c33.6 6.4 81.6 56 116 254.4 1.6 8.8-0.8 17.6-7.2 24-5.6 4.8-12.8 8-20 8zM178.4 48c-20 0-60.8 24.8-95.2 64.8-28 32.8-36.8 59.2-32.8 69.6 9.6 27.2 96 56 212.8 71.2-24-129.6-59.2-201.6-81.6-205.6h-3.2z"
                        p-id="4918"></path>
                    <path
                        d="M751.2 276c-5.6 0.8-9.6-4-8.8-9.6 8-46.4 43.2-227.2 100-237.6 54.4-10.4 172.8 108.8 153.6 160.8-20.8 56-199.2 80.8-244.8 86.4z"
                        fill="#F8C5B9" p-id="4919"></path>
                    <path
                        d="M750.4 296c-8 0-15.2-3.2-20-8.8-6.4-6.4-8.8-15.2-7.2-24C757.6 64.8 804.8 16 838.4 9.6c41.6-8 100 35.2 136.8 77.6 20.8 24.8 53.6 71.2 40 109.6-23.2 61.6-173.6 88.8-261.6 99.2h-3.2z m99.2-248h-4c-22.4 4-56.8 76-81.6 205.6 116-15.2 202.4-44 212.8-71.2 4-10.4-4.8-36.8-32.8-69.6-33.6-40-74.4-64.8-94.4-64.8zM509.6 859.2c-82.4 0-128.8-58.4-130.4-61.6L361.6 776h284l-12 20.8c-1.6 2.4-37.6 61.6-122.4 62.4h-1.6z m-84.8-56c18.4 13.6 47.2 28.8 84.8 28.8h1.6c38.4-0.8 64-15.2 80-28.8H424.8z"
                        p-id="4920"></path>
                    <path
                        d="M354.4 789.6c-12.8 0-21.6-12.8-16.8-24.8 15.2-37.6 59.2-104.8 175.2-103.2 113.6 1.6 158.4 65.6 174.4 102.4 5.6 12-3.2 25.6-16.8 25.6H354.4z"
                        fill="#EF866D" p-id="4921"></path>
                    <path
                        d="M669.6 803.2H354.4c-10.4 0-20.8-5.6-26.4-14.4-5.6-8.8-7.2-20-3.2-29.6 17.6-41.6 64-111.2 184-111.2h4c121.6 1.6 168.8 69.6 186.4 110.4 4 9.6 3.2 21.6-2.4 30.4-6.4 8.8-16 14.4-27.2 14.4z m-160.8-128c-104 0-144 59.2-158.4 94.4-0.8 1.6 0 3.2 0.8 4 0.8 0.8 1.6 2.4 4 2.4h315.2c2.4 0 3.2-1.6 4-2.4 0.8-0.8 1.6-2.4 0-4.8-15.2-34.4-56-92.8-161.6-94.4-1.6 0.8-3.2 0.8-4 0.8z"
                        p-id="4922"></path>
                    <path
                        d="M368 674.4c-3.2 0-6.4-0.8-9.6-3.2-5.6-4.8-6.4-13.6-0.8-19.2 36.8-40 88.8-60.8 155.2-59.2 64 0.8 115.2 20.8 152 58.4 5.6 5.6 4.8 14.4 0 19.2-5.6 5.6-14.4 4.8-19.2 0-31.2-32-76-48.8-132.8-49.6-57.6-0.8-103.2 16-134.4 50.4-3.2 1.6-7.2 3.2-10.4 3.2z"
                        p-id="4923"></path>
                    <path
                        d="M368 618.4c-3.2 0-6.4-0.8-9.6-3.2-5.6-4.8-6.4-13.6-0.8-19.2 36.8-40 88.8-60.8 155.2-59.2 64 0.8 115.2 20.8 152 58.4 5.6 5.6 4.8 14.4 0 19.2-5.6 5.6-14.4 4.8-19.2 0-31.2-32-76-48.8-132.8-49.6-57.6-0.8-103.2 16-134.4 50.4-3.2 1.6-7.2 3.2-10.4 3.2z"
                        p-id="4924"></path>
                    <path d="M456 734.4m-24 0a24 24 0 1 0 48 0 24 24 0 1 0-48 0Z" p-id="4925"></path>
                    <path d="M568 734.4m-24 0a24 24 0 1 0 48 0 24 24 0 1 0-48 0Z" p-id="4926"></path>
                    <path d="M133.6 655.2a87.2 40 0 1 0 174.4 0 87.2 40 0 1 0-174.4 0Z" fill="#EF866D" p-id="4927">
                    </path>
                    <path d="M709.6 655.2a87.2 40 0 1 0 174.4 0 87.2 40 0 1 0-174.4 0Z" fill="#EF866D" p-id="4928">
                    </path>
                    <path d="M284 478.4a72 48 90 1 0 96 0 72 48 90 1 0-96 0Z" p-id="4929"></path>
                    <path d="M644 478.4a72 48 90 1 0 96 0 72 48 90 1 0-96 0Z" p-id="4930"></path>
                    <path d="M353.6 473.6m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#FFFFFF" p-id="4931"></path>
                    <path d="M329.6 465.6m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#FFFFFF" p-id="4932"></path>
                    <path d="M705.6 473.6m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#FFFFFF" p-id="4933"></path>
                    <path d="M681.6 465.6m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0Z" fill="#FFFFFF" p-id="4934"></path>
                </svg>
            </a>

            <a title="github" href="https://github.com/iamtsm" target="_blank">
                <svg style="width: 24px;height: 24px;margin-right: 10px;" viewBox="0 0 1049 1024" p-id="2500" width="64"
                    height="64">
                    <path
                        d="M524.979332 0C234.676191 0 0 234.676191 0 524.979332c0 232.068678 150.366597 428.501342 358.967656 498.035028 26.075132 5.215026 35.636014-11.299224 35.636014-25.205961 0-12.168395-0.869171-53.888607-0.869171-97.347161-146.020741 31.290159-176.441729-62.580318-176.441729-62.580318-23.467619-60.841976-58.234462-76.487055-58.234463-76.487055-47.804409-32.15933 3.476684-32.15933 3.476685-32.15933 53.019436 3.476684 80.83291 53.888607 80.83291 53.888607 46.935238 79.963739 122.553122 57.365291 152.97411 43.458554 4.345855-33.897672 18.252593-57.365291 33.028501-70.402857-116.468925-12.168395-239.022047-57.365291-239.022047-259.012982 0-57.365291 20.860106-104.300529 53.888607-140.805715-5.215026-13.037566-23.467619-66.926173 5.215027-139.067372 0 0 44.327725-13.906737 144.282399 53.888607 41.720212-11.299224 86.917108-17.383422 131.244833-17.383422s89.524621 6.084198 131.244833 17.383422C756.178839 203.386032 800.506564 217.29277 800.506564 217.29277c28.682646 72.1412 10.430053 126.029806 5.215026 139.067372 33.897672 36.505185 53.888607 83.440424 53.888607 140.805715 0 201.64769-122.553122 245.975415-239.891218 259.012982 19.121764 16.514251 35.636014 47.804409 35.636015 97.347161 0 70.402857-0.869171 126.898978-0.869172 144.282399 0 13.906737 9.560882 30.420988 35.636015 25.205961 208.601059-69.533686 358.967656-265.96635 358.967655-498.035028C1049.958663 234.676191 814.413301 0 524.979332 0z"
                        fill="#191717" p-id="2501"></path>
                    <path
                        d="M199.040177 753.571326c-0.869171 2.607513-5.215026 3.476684-8.691711 1.738342s-6.084198-5.215026-4.345855-7.82254c0.869171-2.607513 5.215026-3.476684 8.691711-1.738342s5.215026 5.215026 4.345855 7.82254z m-6.953369-4.345856M219.900283 777.038945c-2.607513 2.607513-7.82254 0.869171-10.430053-2.607514-3.476684-3.476684-4.345855-8.691711-1.738342-11.299224 2.607513-2.607513 6.953369-0.869171 10.430053 2.607514 3.476684 4.345855 4.345855 9.560882 1.738342 11.299224z m-5.215026-5.215027M240.760389 807.459932c-3.476684 2.607513-8.691711 0-11.299224-4.345855-3.476684-4.345855-3.476684-10.430053 0-12.168395 3.476684-2.607513 8.691711 0 11.299224 4.345855 3.476684 4.345855 3.476684 9.560882 0 12.168395z m0 0M269.443034 837.011749c-2.607513 3.476684-8.691711 2.607513-13.906737-1.738342-4.345855-4.345855-6.084198-10.430053-2.607513-13.037566 2.607513-3.476684 8.691711-2.607513 13.906737 1.738342 4.345855 3.476684 5.215026 9.560882 2.607513 13.037566z m0 0M308.555733 853.526c-0.869171 4.345855-6.953369 6.084198-13.037566 4.345855-6.084198-1.738342-9.560882-6.953369-8.691711-10.430053 0.869171-4.345855 6.953369-6.084198 13.037566-4.345855 6.084198 1.738342 9.560882 6.084198 8.691711 10.430053z m0 0M351.145116 857.002684c0 4.345855-5.215026 7.82254-11.299224 7.82254-6.084198 0-11.299224-3.476684-11.299224-7.82254s5.215026-7.82254 11.299224-7.82254c6.084198 0 11.299224 3.476684 11.299224 7.82254z m0 0M391.126986 850.049315c0.869171 4.345855-3.476684 8.691711-9.560882 9.560882-6.084198 0.869171-11.299224-1.738342-12.168395-6.084197-0.869171-4.345855 3.476684-8.691711 9.560881-9.560882 6.084198-0.869171 11.299224 1.738342 12.168396 6.084197z m0 0"
                        fill="#191717" p-id="2502"></path>
                </svg>
            </a>

            <a title="webrtc检测" @click="webrtcCheck()" id="check" style="width: 30px;height: 30px;">
                <svg viewBox="0 0 1024 1024" p-id="7867" width="64" height="64">
                    <path
                        d="M824.593094 277.816453l-202.741656 202.741657a20.48 20.48 0 1 1-28.963094-28.963094l202.741657-202.741657-14.481547-14.481546-202.741656 202.741656a20.48 20.48 0 1 1-28.963094-28.963094l217.223203-217.223203a20.48 20.48 0 0 1 28.963094 0l86.889281 86.889281a20.48 20.48 0 0 1 0 28.963094l-217.223203 217.223203a20.48 20.48 0 1 1-28.963094-28.963094l202.741656-202.741656-14.481547-14.481547z m-346.10897 119.038316c2.114306 0.955782 4.054833 2.317048 5.792619 4.054833l304.112484 304.112484a102.4 102.4 0 0 1-144.815469 144.815469l-304.112484-304.112485c-1.737786-1.737786-3.084569-3.692794-4.054833-5.792618a176.72192 176.72192 0 0 1-156.212446-49.077963 176.88576 176.88576 0 0 1-43.097084-180.092517 20.48 20.48 0 0 1 30.324359-11.005975c10.904605 6.820809 47.238806 28.6445 108.756417 65.311776l27.674237-27.99283c-37.145168-62.545801-59.026785-98.966891-65.282814-108.669528a20.48 20.48 0 0 1 10.745308-30.527101 176.90624 176.90624 0 0 1 181.091744 42.764008 176.72192 176.72192 0 0 1 49.077962 156.183483z m-100.270231 129.696733l294.322959 294.322959a61.44 61.44 0 1 0 86.889282-86.889281L465.103175 439.662221a176.55808 176.55808 0 0 1-35.697013 51.192268 176.55808 176.55808 0 0 1-51.192269 35.697013z m-170.056805-64.660106a135.96672 135.96672 0 1 0 78.982357-231.038599c12.64239 20.954798 32.264886 53.871354 58.997822 98.908965a20.48 20.48 0 0 1-3.041125 24.850334l-50.062707 50.64197A20.48 20.48 0 0 1 268.009322 408.440006c-44.74798-26.646046-77.60661-46.297505-98.691742-59.012303a135.84384 135.84384 0 0 0 38.868472 112.43473z m95.1148 337.246263a20.48 20.48 0 0 1-28.963093-28.963093l115.852375-115.852375a20.48 20.48 0 1 1 28.963093 28.963093l-115.852375 115.852375z"
                        fill="#2c2c2c" p-id="7868"></path>
                    <path
                        d="M695.504586 777.429821m-21.722321 21.72232a30.72 30.72 0 1 0 43.444641-43.444641 30.72 30.72 0 1 0-43.444641 43.444641Z"
                        fill="#2c2c2c" p-id="7869"></path>
                    <path
                        d="M152.446578 871.559875l50.685414-94.130054 43.44464-14.481547 43.444641 43.44464-14.481547 43.444641L181.409671 900.522969z"
                        fill="#2c2c2c" p-id="7870"></path>
                </svg>
            </a>

            <a title="网页录屏" @click="startScreen()" v-show="switchData.openScreen">
                <i id="screen" class="layui-icon layui-icon-radio"
                    style="font-size: 23px; font-weight: bold;margin-right: 10px;cursor: pointer;transition: color 0.8s;"></i>
                <b v-show="isScreen" style="position: relative; top: -4px; left: -5px;">{{screenTimes}}</b>
            </a>

            <a title="音视频电话" @click="startVideoShare()" v-show="switchData.openVideoShare">
                <i class="layui-icon layui-icon-video"
                    style="font-size: 23px; font-weight: bold;margin-right: 10px;cursor: pointer;transition: color 0.8s;"></i>
                <b v-show="isVideoShare" style="position: relative; top: -4px; left: -5px;">{{videoShareTimes}}</b>
            </a>

            <a title="屏幕共享" @click="startScreenShare()" v-show="switchData.openScreenShare">
                <svg id="screenShare" style="width: 24px;height: 24px;margin-right: 10px;transition: fill 0.8s;"
                    viewBox="0 0 1024 1024" p-id="2745" width="64" height="64">
                    <path
                        d="M889.6 127.488H141.696c-38.656 0-70.08 31.488-70.08 70.144v467.392c0 38.656 31.488 70.144 70.08 70.144h342.976v99.456H368.384c-18.688 0-33.792 13.888-33.792 30.976s15.104 30.976 33.792 30.976h294.592c18.688 0 33.792-13.888 33.792-30.976s-15.104-30.976-33.792-30.976H546.688v-99.456H889.6c38.656 0 70.144-31.424 70.144-70.144V197.568c0-38.592-31.424-70.08-70.144-70.08z m4.864 526.592a22.272 22.272 0 0 1-22.272 22.336H159.168a22.272 22.272 0 0 1-22.272-22.336V208.512c0-12.352 10.048-22.272 22.272-22.272h713.024c12.288 0 22.272 9.92 22.272 22.272V654.08zM566.976 313.984c-13.184-10.624-23.936-2.88-23.936 15.872v49.984h-2.176c-77.056 0-208.128 89.024-209.216 168.192 0 6.336 5.12 8.128 10.048 0 24.896-44.416 129.536-67.456 182.848-67.456h18.496v52.736c0 15.744 11.648 26.496 24.896 15.872l121.856-97.792c13.184-10.56 13.184-27.904 0-38.528l-122.816-98.88z"
                        p-id="2746"></path>
                </svg>
                <b v-show="isScreenShare" style="position: relative; top: -8px; left: -5px;">{{screenShareTimes}}</b>
            </a>

            <a title="公共聊天频道" @click="chating()" v-show="switchData.openCommRoom">
                <span v-show="chatingList.length > 0"
                    class="layui-badge new-dot layui-anim-rotate layui-anim-loop">{{Math.min(chatingList.length,
                    99)}}</span>
                <svg style="margin-left: -5px;width:34px;height: 34px;" viewBox="0 0 1024 1024" p-id="6507">
                    <path
                        d="M802.4 555c0 0-9.9-31.8-41.7-31.8l-89.8 0c-26.7 31.5-52.4 43.4-93.9 53.8l-26 26 78 0c57.7-1.6 75.5 71.1 78 78l130 0L802.4 555z"
                        p-id="6508"></path>
                    <path
                        d="M717.6 382.3c0 41.1-12.6 79.2-34.3 110.9 5.4 0.7 10.8 1.1 16.4 1.1 71.1 0 112-55 111.2-125.2-1.6-151.5-168.8-127.8-182-130C664.1 256.8 717.6 295.8 717.6 382.3z"
                        p-id="6509"></path>
                    <path
                        d="M221.6 555c0 0 9.9-31.8 41.7-31.8l89.8 0c26.7 31.5 52.4 43.4 93.9 53.8l26 26-78 0c-57.7-1.6-75.5 71.1-78 78L187 681 221.6 555z"
                        p-id="6510"></path>
                    <path
                        d="M306.4 382.3c0 41.1 12.6 79.2 34.3 110.9-5.4 0.7-10.8 1.1-16.4 1.1-71.1 0-112-55-111.2-125.2 1.6-151.5 168.8-127.8 182-130C359.9 256.8 306.4 295.8 306.4 382.3z"
                        p-id="6511"></path>
                    <path
                        d="M673.2 392.9c0 87.9-72.1 159.2-161.2 159.2-89.1 0-161.2-71.3-161.2-159.2 0-88 80-153.8 169.1-153.8C600 239.1 673.2 304.9 673.2 392.9z"
                        p-id="6512"></path>
                    <path
                        d="M421 629.1l182 0c39.9 0 52 26 52 26l52 130L317 785.1l52-130C369 655.1 381.1 629.1 421 629.1z"
                        p-id="6513"></path>
                </svg>
            </a>

            <a title="反馈问题" @click="sendBugs()" style="margin-top: 5px" v-show="switchData.openSendBug">
                <svg style="width: 27px;height: 27px;margin-right: 10px;" viewBox="0 0 1024 1024" p-id="4621" width="64"
                    height="64">
                    <path d="M360.389512 557.544289l184.919617 0 0 30.819936-184.919617 0 0-30.819936Z" p-id="4622">
                    </path>
                    <path d="M360.389512 480.981543l308.200384 0 0 30.819936-308.200384 0 0-30.819936Z" p-id="4623">
                    </path>
                    <path d="M360.389512 404.417773l308.200384 0 0 30.819936-308.200384 0 0-30.819936Z" p-id="4624">
                    </path>
                    <path
                        d="M511.999488 64.021106c-247.27171 0-447.724091 200.452381-447.724091 447.724091s200.452381 447.724091 447.724091 447.724091 447.724091-200.453405 447.724091-447.724091S759.271198 64.021106 511.999488 64.021106zM761.050728 620.157325c0 34.041304-27.599591 61.639872-61.640895 61.639872l-154.09968 0 0 123.280768L422.029384 681.798221 329.569576 681.798221c-34.040281 0-61.639872-27.599591-61.639872-61.639872L267.929704 373.597837c0-34.040281 27.599591-61.639872 61.639872-61.639872l369.840256 0c34.042327 0 61.640895 27.599591 61.640895 61.639872L761.050728 620.157325z"
                        p-id="4625"></path>
                </svg>
            </a>

            <a title="执行日志" @click="clickLogs">
                <svg style="width: 25px;height: 27px;margin-right: 5px;" viewBox="0 0 1024 1024" width="128"
                    height="128">
                    <path d="M277.9 742s167.9-294.1 465.3-465.3C575.7 577.8 277.9 742 277.9 742z" fill="#FFFFFF"
                        p-id="1512"></path>
                    <path d="M743.1 742S575.2 447.9 277.8 276.7C445.3 577.8 743.1 742 743.1 742z" fill="#FFFFFF"
                        p-id="1513"></path>
                    <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1881EA" p-id="1514">
                    </path>
                    <path d="M512 267.1m-63 0a63 63 0 1 0 126 0 63 63 0 1 0-126 0Z" fill="#FFFFFF" p-id="1515"></path>
                    <path d="M512 797.2s63-220.5 63-306.3-25.5-101.5-63-101.5-63 15.8-63 101.5 63 306.3 63 306.3z"
                        fill="#FFFFFF" p-id="1516"></path>
                </svg>
            </a>
        </div>

        <div style="text-align: center;font-size: 20px;color: beige;">注 : 仅用于学习用途, 请勿他用</div>
        <div style="text-align: center;font-size: 15px;color: beige;margin-bottom: 5px;margin-top: 8px;">qq交流群 : <a
                target="_blank" href="https://jq.qq.com/?_wv=1027&k=TKCwMBjN">624214498</a> </div>
        <div style="text-align: center;font-size: 12px;color: beige;margin-bottom: 5px;margin-top: 8px;">
            <svg style="width: 13px;height: 8px;" viewBox="0 0 1024 1024" p-id="4241" width="128" height="128">
                <path
                    d="M512 277.333333a234.666667 234.666667 0 1 0 0 469.333334 234.666667 234.666667 0 0 0 0-469.333334z"
                    p-id="4242" fill="#1afa29"></path>
            </svg>
            当前在线人数 : {{allManCount}}
        </div>
        <div class="roomClass">
            <input :disabled="createDisabled" :class="[{'layui-btn-disabled':createDisabled}]" type="text" name="title"
                maxlength="15" autocomplete="off" class="layui-input cusInput" v-model="roomId" placeholder="输入房间编号">
            <i title="随机刷新房间号" v-show="!createDisabled && switchData.openRefleshRoom" @click="refleshRoom()"
                id="refresh" class="layui-icon layui-icon-refresh"
                style="cursor: pointer; left: 85%;position: absolute;font-size: 24px;margin-top: -40px;"></i>
            <div class="layui-btn-container center">
                <button type="button" :class="[{'layui-btn-disabled':createDisabled}]" @click="createFileRoom()"
                    :disabled="createDisabled"> 创建/加入房间 </button>
                <button type="button" class="exitBtn" :class="[{'layui-btn-disabled':exsitDisabled}]"
                    @click="exitRoom()" :disabled="exsitDisabled"> 退出房间 </button>
            </div>
        </div>


        <div id="self" v-show="!isTxtMode">
            <div class="layui-upload-drag layui-btn-disabled" style="width: 100%;user-select: none;"
                id="chooseFileListDisable" v-show="(uploadDisabled && !createDisabled) || noOthersInRoom" disabled>
                <i class="layui-icon"></i>
                <p style="color: antiquewhite;">(当前禁选)，请确保双方先加入房间，才可选择文件发送，支持多文件拖拽发送</p>

            </div>
            <div class="layui-upload-drag" style="width: 100%;" id="chooseFileList"
                v-show="createDisabled && !noOthersInRoom">
                <i class="layui-icon"></i>
                <p style="color: antiquewhite;">点击上传，或将文件拖拽到此处，支持多文件拖拽发送</p>
                <div class="fileRoom swiper-container" style="margin-top: 20px;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide fileBlock" v-for="file in chooseFileList">
                            <i style="font-size: 15px;position: relative;" v-show="file.fileSendStatus === 0"
                                class="layui-icon layui-icon-play"></i>
                            <i style="font-size: 15px;position: relative;" v-show="file.fileSendStatus === 1"
                                class="layui-icon layui-icon-loading layui-anim-rotate layui-anim-loop"></i>
                            <i style="font-size: 15px;position: relative;" v-show="file.fileSendStatus === 2"
                                class="layui-icon layui-icon-ok-circle"></i>
                            <i style="font-size: 40px;" class="layui-icon layui-icon-list"></i>
                            <b style="font-size: 12px;word-break: break-all;">{{file.name}}</b>
                        </div>
                    </div>
                    <div class="swiper-scrollbar"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-sm6 layui-col-md3" id="txtSelf" v-show="isTxtMode"
            style="width: 70%; margin-left: 15%;margin-top: 5%;display: grid;">
            <textarea name="txt" id="txt"></textarea>
            <button type="button" class="layui-btn sendTxt" @click="sendTxt">发送文本</button>
            <button type="button" style="margin-left:50%;" class="layui-btn sendTxt" @click="sendTxt(true)">发送富文本</button>
        </div>

        <div class="maskBottom" :style="{top: numSendFile + '%'}">
            <div class="layui-col-sm2" style="width: 100%;">
                <div class="layui-card">
                    <div class="layui-card-header">发送的文件/文本
                        <i @click="clickSendFile" class="layui-icon layui-icon-close"
                            style="cursor: pointer; right: 10px;position: absolute;"></i>
                    </div>
                    <div class="layui-card-body" style="overflow-y: scroll;height: 330px;">
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <th>用户</th>
                                    <th>名称</th>
                                    <th>格式</th>
                                    <th>大小</th>
                                    <th>进度</th>
                                    <th>耗时</th>
                                </tr>
                            </thead>
                            <tbody ref="files">
                                <tr v-for="file in sendFileList">
                                    <td><span>自己</span></td>
                                    <td v-if="file.id === 'txt'"><span v-html="file.name"></span></td>
                                    <td v-else><span>{{file.name}}</span></td>
                                    <td><span>{{file.type}}</span></td>
                                    <td><span>{{getFileSizeStr(file.size)}}</span></td>
                                    <td><span>{{file.process}}%</span></td>
                                    <td><span>{{file.cost}}秒</span></td>
                                </tr>
                                <div style="display: flex;padding:5px;">
                                    <span style="word-break: keep-all;font-size: 12px;">进度：</span>
                                    <progress ref="sendProgress" :value="currentSendSize" max="0"
                                        style="width: 100%;margin: auto;"></progress>
                                </div>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="maskBottom" :style="{top: numReceiveFile + '%'}">
            <div class="layui-col-sm2" style="width: 100%;">
                <div class="layui-card">
                    <div class="layui-card-header"> 接收的文件
                        <i @click="clickReceiveFile" class="layui-icon layui-icon-close"
                            style="cursor: pointer; right: 10px;position: absolute;"></i>
                    </div>
                    <div class="layui-card-body" style="overflow-y: scroll;height: 330px;">
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <th>用户</th>
                                    <th>名称</th>
                                    <th>格式</th>
                                    <th>大小</th>
                                    <th>进度</th>
                                    <th>耗时</th>
                                </tr>
                            </thead>
                            <tbody ref="files">
                                <tr v-for="file in receiveFileList">
                                    <td><span>{{file.id}}</span></td>
                                    <td v-if="file.href === ''"><span :style="file.style">{{file.name}}</span></td>
                                    <td v-else><a :href="file.href" :download="file.name"
                                            :style="file.style">{{file.name}}</a></td>
                                    <td><span>{{file.type}}</span></td>
                                    <td><span>{{getFileSizeStr(file.size)}}</span></td>
                                    <td><span>{{file.process}}%</span></td>
                                    <td><span>{{file.cost}}秒</span></td>
                                </tr>
                                <div style="display: flex;padding:5px;">
                                    <span style="word-break: keep-all;font-size: 12px;">进度：</span>
                                    <progress ref="receiveProgress" :value="currentReceiveSize" max="0"
                                        style="width: 100%;margin: auto;"></progress>
                                </div>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="maskBottom" :style="{top: numReceiveTxt + '%'}">
            <div class="layui-col-sm2" style="width: 100%;">
                <div class="layui-card">
                    <div class="layui-card-header">
                        接收的文本内容
                        <i @click="clickReceiveTxt(false)" class="layui-icon layui-icon-close"
                            style="cursor: pointer; right: 10px;position: absolute;"></i>
                    </div>
                    <div class="layui-card-body" style="overflow-y: scroll;height: 330px;">
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <th>发送方ID</th>
                                    <th>富文本内容</th>
                                    <th>接收时间</th>
                                </tr>
                            </thead>
                            <tbody ref="txts">
                                <tr v-for=" (txt , index) in receiveTxtList">
                                    <td><span>{{txt.id}}</span></td>
                                    <td><span style="cursor: pointer;" :id="txt.c_id"
                                            @click="copyTxt(txt.c_id, txt.content)" v-html="txt.content"></span></td>
                                    <td><span>{{txt.time}}</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="maskRight" @click="clickLogs" :style="{left: numLogs + '%'}">
            <div class="layui-col-sm2" style="width: 100%;">
                <div class="layui-card">
                    <div class="layui-card-header">执行日志</div>
                </div>
                <div class="layui-card"
                    style="background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);">
                    <div :style="{height: logsHeight+'px',overflow: 'scroll'}">
                        <div class="layui-card-body logs" v-for="log in logs">
                            {{log}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mediaShareRoom swiper-container">
            <div class="swiper-wrapper" id="mediaShareRoomList"> </div>
            <div class="side-shadown-left"> </div>
            <div class="side-shadown-rigth"> </div>
        </div>

        <div class="userRoom swiper-container" v-show="Object.keys(remoteMap).length > 0">
            <div class="swiper-wrapper">
                <div class="swiper-slide userBlock" v-for="remote in remoteMap">
                    <svg style="margin-left: 5px;" viewBox="0 0 1024 1024" width="64" height="64">
                        <path
                            d="M310.956564 662.25202zM307.071733 652.841638zM303.914275 643.972652c0.219038 0.669513 0.471139 1.326628 0.69431 1.992009-0.231437-0.661248-0.471139-1.322495-0.69431-1.992009zM539.239951 781.611372a3.0872 3.0872 0 0 0 0.962942-0.181843c-0.698443 0.086789-1.401019 0.136382-2.103594 0.219038l1.140652-0.037195zM315.841531 672.418704zM292.044878 564.370822a1501.734968 1501.734968 0 0 0-0.169445-17.436277c-0.02893 5.926433 0.02893 11.737148 0.169445 17.436277zM729.39414 534.32951c-0.169445 10.910588-0.376085 22.056745-0.376085 33.368215 0 21.507083-2.49621 41.373445-7.021624 59.661078 7.401842-28.264209 9.476507-58.218732 7.397709-93.029293z"
                            fill="#002738" p-id="2725"></path>
                        <path
                            d="M507.843081 8.435042c-280.451702 0-507.838272 227.266719-507.838272 507.722553 0 187.54226 101.608982 351.250672 252.745422 439.200756 0.421545-1.169582 0.818294-2.359828 1.25637-3.52941 16.915544-45.564103 44.76234-81.97819 79.184418-109.176136 22.445228-17.886752 48.200828-32.198633 76.609685-42.39838-58.995698-51.403747-60.739739-65.430465-40.489026-63.53351a193.757989 193.757989 0 0 1-47.122168-53.015538c0.396749 0.648849 0.739771 1.310097 1.144785 1.963079-193.113273-186.203234-50.234165-534.188995 184.508786-411.072929l0.23557 0.115718c161.344451-84.825688 283.667019 58.342716 280.381444 212.863916-0.938145 70.860962-28.115428 143.685003-89.785046 196.799729 0.442209-0.789365 0.830692-1.582862 1.268769-2.368093-13.46879 22.879172-31.000121 41.844584-51.180576 56.966493 10.183215 3.32277 5.996691 19.816769-28.22288 61.500174h-0.264499c27.788937 10.046833 53.019671 24.02809 75.084682 41.456101 34.029462 26.623488 61.73161 62.17382 78.911653 106.630332 144.858718-89.433758 241.413288-249.592096 241.413288-432.406435-0.004133-280.451702-227.38657-507.718421-507.842405-507.71842z"
                            fill="#002738" p-id="2726"></path>
                        <path
                            d="M538.103431 781.648567c0.702576-0.082656 1.405151-0.13225 2.103595-0.219038 10.551034-3.149192 88.218715-49.08938 108.560349-42.452106 20.180455-15.121909 37.711786-34.087322 51.180576-56.966494 9.943513-18.072728 17.167645-36.000807 22.052612-54.652126 4.529547-18.287633 7.021625-38.149862 7.021625-59.661078 0-11.311469 0.20664-22.46176 0.376085-33.368215-0.793497-13.369603-2.18625-27.445914-4.1204-42.423176-95.711479 5.856175-163.658818-27.883991-217.426526-82.002987-75.208666 51.312825-146.904453 80.949123-214.029366 82.002987-1.074528 19.498543-1.843228 37.761379-1.938282 55.028211 0.086789 5.740457 0.152914 11.555304 0.169445 17.436277 0.739771 29.082503 3.979885 55.276179 11.865264 79.605963 0.227304 0.669513 0.462873 1.326628 0.69431 1.992009 0.776966 2.310234 1.603526 4.595672 2.467281 6.872844 1.103457 2.851631 2.248242 5.661934 3.459152 8.422643 0.144648 0.326491 0.276897 0.661248 0.425678 0.987739 1.330761 2.98388 2.73178 5.901636 4.186525 8.773931 0.23557 0.462873 0.462873 0.934012 0.698443 1.392753 1.186113 2.297836 2.434218 4.53368 3.694722 6.757126 0.867888 1.512604 1.731643 3.029341 2.653256 4.533679a193.757989 193.757989 0 0 0 47.122168 53.015539c31.421667 2.93842 115.805145 44.21681 121.429884 43.716742 19.167919 2.52514 28.243545 1.789502 47.353604 1.206777zM695.356412 841.933698c35.033732 27.66082 62.062234 63.967454 78.804201 106.692324l0.10332-0.066125c-17.17591-44.45238-44.873925-80.002712-78.907521-106.626199zM333.191019 842.656937c-34.422078 27.197947-62.264741 63.612034-79.184418 109.176137 16.485733-43.753937 43.708476-80.907795 79.184418-109.176137z"
                            fill="#FCE9EA" p-id="2727"></path>
                        <path
                            d="M695.356412 841.933698c-22.065011-17.428011-47.295745-31.413401-75.084682-41.456101l-210.363573-0.119852-0.107453-0.095054c-28.408856 10.199747-54.164456 24.511628-76.609685 42.398379-35.471809 28.272474-62.698685 65.422199-79.184418 109.176136-0.438077 1.165449-0.834825 2.355695-1.25637 3.52941 74.964831 43.629953 162.104886 68.633384 255.09285 68.633384 97.670425 0 188.88542-27.590562 266.317532-75.365712-16.741966-42.737269-43.770468-79.03977-78.804201-106.70059z"
                            fill="#B0C11D" p-id="2728"></path>
                        <path
                            d="M620.27173 800.473464h0.264499c34.219571-41.683405 38.406096-58.177404 28.222881-61.500174-20.341634-6.633141-98.009315 39.307046-108.56035 42.452106a3.124396 3.124396 0 0 1-0.962942 0.181843l-1.136519 0.037195c-19.11006 0.586857-28.181553 1.318363-47.36187-1.206777-5.624739 0.500069-90.008217-40.778322-121.429884-43.716742-20.250712-1.896954-18.510804 12.133896 40.489026 63.53351l0.107453 0.095055 210.367706 0.123984z"
                            fill="#FF5947" p-id="2729"></path>
                        <path
                            d="M315.841531 672.418704c-0.239702-0.458741-0.462873-0.92988-0.698442-1.392753a180.789268 180.789268 0 0 1-4.186525-8.773931l-0.425679-0.987739a184.876605 184.876605 0 0 1-5.926432-15.295487c-0.223171-0.665381-0.475272-1.322495-0.694311-1.992009-7.885379-24.329784-11.125493-50.523461-11.865264-79.605963a563.192974 563.192974 0 0 1-0.169445-17.436277c0.095054-17.266832 0.859622-35.529668 1.938283-55.028211 67.124912-1.053864 138.8207-30.694294 214.029365-82.002987v-135.30782c-234.742951-123.116065-377.622059 224.869696-184.508786 411.072929-0.409147-0.648849-0.748037-1.310097-1.144785-1.963079-0.921614-1.500206-1.785369-3.016943-2.653257-4.53368-1.281168-2.235844-2.521007-4.488219-3.694722-6.752993zM698.675049 684.379023c61.669618-53.118858 88.846901-125.938767 89.785046-196.799729-1.49194 69.976543-28.727082 142.279852-89.785046 196.799729z"
                            fill="#FECF77" p-id="2730"></path>
                        <path
                            d="M507.843081 409.903347c53.77184 54.123128 121.715047 87.863295 217.426526 82.002987 1.93415 14.977262 3.326903 29.053573 4.1204 42.423176 2.078798 34.810561 0.004133 64.765084-7.397709 93.029293-4.884968 18.651319-12.109099 36.579399-22.052613 54.652126-0.433944 0.785232-0.822427 1.578729-1.268769 2.368094 61.053831-54.515744 88.293106-126.823186 89.785046-196.799729 3.285575-154.525334-119.036993-297.689604-280.381444-212.863916l-0.23557-0.115719v135.303688z"
                            fill="#FF9F31" p-id="2731"></path>
                    </svg>
                    <div class="layui-badge layui-bg-blue layuiadmin-badge remoteId">{{remote.id}}</div>
                </div>
            </div>
            <div class="swiper-scrollbar"></div>
        </div>

        <button class="sendFileBtn" style="background-color: #79b0e8;" @click="initSendFile()" v-show="!uploadDisabled">
            <svg viewBox="0 0 1024 1024" style="width: 30px;height: 25px;margin-left: -8px;margin-right: 10px;">
                <path
                    d="M341.333333 277.333333l115.2-115.2c8.533333-8.533333 17.066667-12.8 29.866667-17.066666v473.6c0 17.066667 12.8 29.866667 25.6 29.866666s25.6-12.8 25.6-29.866666V140.8c8.533333 4.266667 21.333333 8.533333 29.866667 17.066667L682.666667 277.333333c4.266667 4.266667 12.8 8.533333 21.333333 8.533334s12.8-4.266667 21.333333-8.533334c12.8-12.8 12.8-29.866667 0-38.4l-115.2-115.2C554.666667 68.266667 469.333333 68.266667 418.133333 119.466667L302.933333 234.666667c-12.8 12.8-12.8 29.866667 0 38.4s25.6 12.8 38.4 4.266666z"
                    fill="#191A1A" p-id="2860"></path>
                <path
                    d="M738.133333 435.2h-72.533333c-17.066667 0-29.866667 12.8-29.866667 25.6s12.8 25.6 29.866667 25.6h72.533333c42.666667 0 76.8 34.133333 76.8 76.8V810.666667c0 42.666667-34.133333 76.8-76.8 76.8H285.866667c-42.666667 0-76.8-34.133333-76.8-76.8v-243.2c0-42.666667 34.133333-76.8 76.8-76.8h72.533333c17.066667 0 25.6-12.8 25.6-25.6s-12.8-25.6-25.6-25.6H285.866667c-72.533333 0-132.266667 59.733333-132.266667 132.266666V810.666667c0 72.533333 59.733333 132.266667 132.266667 132.266666h456.533333c72.533333 0 132.266667-59.733333 132.266667-132.266666v-243.2c0-72.533333-59.733333-132.266667-136.533334-132.266667z"
                    fill="#191A1A" p-id="2861"></path>
            </svg>
            <div style="font-size: 14px;word-break: keep-all;">发送文件</div>
        </button>

        <menu class="menu" style="z-index: 10000;">
            <button ref="btnHome" @click="clickHome" class="menuItem" :class="currentMenu === 1 ? 'active' : ''"
                style="--bgColorBody: #ffb457; --bgColorItem: #ff8c00;">
                <span v-show="sendFileList.length > 0 && sendFileList.length < 10"
                    class="layui-badge new-dot layui-anim-rotate layui-anim-loop"
                    style="padding: 0;position: relative; top: -20px;">{{Math.min(sendFileList.length, 99)}}</span>
                <span v-show="sendFileList.length >= 10" class="layui-badge new-dot layui-anim-rotate layui-anim-loop"
                    style="position: relative; top: -20px;">{{Math.min(sendFileList.length, 99)}}</span>
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M3.8,6.6h16.4"></path>
                    <path d="M20.2,12.1H3.8"></path>
                    <path d="M3.8,17.5h16.4"></path>
                </svg>
            </button>
            <button ref="btnTxt" @click="clickTxt" class="menuItem" :class="currentMenu === 3 ? 'active' : ''"
                style="--bgColorBody: rgb(122, 197, 111); --bgColorItem: rgb(122, 197, 111)">
                <span v-show="receiveTxtList.length > 0 && receiveTxtList.length < 10"
                    class="layui-badge new-dot layui-anim-rotate layui-anim-loop"
                    style="padding: 0; position: relative; top: -20px;">{{Math.min(receiveTxtList.length, 99)}}</span>
                <span v-show="receiveTxtList.length >= 10" class="layui-badge new-dot layui-anim-rotate layui-anim-loop"
                    style="position: relative; top: -20px;">{{Math.min(receiveTxtList.length, 99)}}</span>
                <svg class="icon" viewBox="0 0 1024 1024" p-id="21754" width="128" height="128">
                    <path
                        d="M192.8 868.7c-3.8 0-7.7-0.7-11.4-2.3-10.7-4.4-17.6-14.4-17.6-25.6V724.6h-46.4C52.7 724.6 0.1 676.4 0.1 617.1V236.3c0-59.3 52.6-107.5 117.3-107.5h622.1c64.7 0 117.3 48.2 117.3 107.5v380.8c0 59.3-52.6 107.5-117.3 107.5H346.8L213.7 860c-5.6 5.7-13.2 8.7-20.9 8.7z m-75.4-704.1c-45 0-81.5 32.2-81.5 71.7v380.8c0 39.5 36.6 71.7 81.5 71.7h64.3c9.9 0 17.9 8 17.9 17.9v116.5l126.9-129.1c3.4-3.4 8-5.3 12.8-5.3h400.2c45 0 81.5-32.2 81.5-71.7V236.3c0-39.5-36.6-71.7-81.5-71.7H117.4z"
                        fill="#ffffff" p-id="21755"></path>
                    <path
                        d="M884 938.7c-7 0-13.7-2.8-18.7-8.1L774 833.3H502.3c-13.5 0-26.5-2.9-38.6-8.7-8.9-4.2-12.7-14.9-8.5-23.9 4.3-9 15-12.7 23.9-8.5 7.3 3.5 15.1 5.2 23.3 5.2h279.5c4.9 0 9.7 2.1 13.1 5.6l79.1 84.2v-72c0-9.9 8-17.9 17.9-17.9h44.9c28.4 0 51.5-21.4 51.5-47.6V471.6c0-14.9-7.8-29.2-20.9-38.2-8.1-5.6-10.2-16.8-4.6-24.9 5.6-8.2 16.8-10.2 24.9-4.6 22.8 15.7 36.4 41 36.4 67.7V750c0 46-39.2 83.4-87.4 83.4h-27v80.2c0 10.3-6.3 19.4-16 23.3-3.3 1.2-6.5 1.8-9.8 1.8zM202.7 402c-9.8 0-17.8-7.9-17.9-17.7-0.1-9.9 7.9-18 17.7-18.1l441.7-4h0.2c9.8 0 17.8 7.9 17.9 17.7 0.1 9.9-7.9 18-17.7 18.1l-441.7 4h-0.2zM473.3 522.8H202.7c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h270.6c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9z"
                        fill="#ffffff" p-id="21756"></path>
                </svg>
            </button>
            <button ref="btnReceive" @click="clickReceive" class="menuItem" :class="currentMenu === 2 ? 'active' : ''"
                style="--bgColorBody: rgb(112, 161, 255); --bgColorItem: rgb(112, 161, 255)">
                <span v-show="receiveFileList.length > 0 && receiveFileList.length < 10"
                    class="layui-badge new-dot layui-anim-rotate layui-anim-loop"
                    style="padding: 0; position: relative; top: -20px;">{{Math.min(receiveFileList.length, 99)}}</span>
                <span v-show="receiveFileList.length >= 10"
                    class="layui-badge new-dot layui-anim-rotate layui-anim-loop"
                    style="position: relative; top: -20px;">{{Math.min(receiveFileList.length, 99)}}</span>
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8
                    C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z"></path>
                    <path d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6"></path>
                </svg>
            </button>

            <div class="menuBorder" style="transform: translate3d(108px, 0px, 0px);"></div>
        </menu>

        <div class="svg-container">
            <svg viewBox="0 0 202.9 45.5">
                <clippath id="menu" clipPathUnits="objectBoundingBox"
                    transform="scale(0.0049285362247413 0.021978021978022)">
                    <path d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
                        c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
                        c9.2,3.6,17.6,4.2,23.3,4H6.7z"></path>
                </clippath>
            </svg>
        </div>
    </div>

    <script type="text/javascript" src="/js/comm.min.js"></script>
    <script type="text/javascript" src="/js/screen.min.js"></script>
    <script type="text/javascript" src="/js/index.min.js"></script>
    <script type="text/javascript" src="/js/screenShare.min.js"></script>
    <script type="text/javascript" src="/js/videoShare.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script>
        setTimeout(() => {
            let clientWidth = document.body.clientWidth;
            let slidesPerView = parseInt((clientWidth / 100)) - 1;
            let userRoomSwiper = new Swiper('.userRoom', {
                direction: 'horizontal', // 垂直切换选项
                loop: false, // 循环模式选项
                slidesPerView: slidesPerView,
                // effect : "coverflow", //切换样式
                observer: true,
                scrollbar: {
                    el: '.swiper-scrollbar',
                }
            })
            userRoomSwiper.scrollbar.$dragEl.css('background', '#ff6600');
            userRoomSwiper.scrollbar.$el.css('height', '4px');
            window.userRoomSwiper = userRoomSwiper;

            let slidesPerViewFile = parseInt((clientWidth / 100)) - 1;
            let fileRoomSwiper = new Swiper('.fileRoom', {
                direction: 'horizontal',
                loop: false,
                slidesPerView: slidesPerViewFile,
                observer: true,
                scrollbar: {
                    el: '.swiper-scrollbar',
                }
            })
            fileRoomSwiper.scrollbar.$dragEl.css('background', '#ff6600');
            fileRoomSwiper.scrollbar.$el.css('height', '4px');
            window.fileRoomSwiper = fileRoomSwiper;

            let slidesPerViewScreenShare = parseInt((clientWidth / 100)) - 1;
            let mediaShareRoomSwiper = new Swiper('.mediaShareRoom', {
                direction: 'horizontal',
                loop: false,
                slidesPerView: slidesPerViewScreenShare,
                observer: true,
                scrollbar: {
                    el: '.swiper-scrollbar',
                }
            })
            mediaShareRoomSwiper.scrollbar.$dragEl.css('background', '#ff6600');
            mediaShareRoomSwiper.scrollbar.$el.css('height', '4px');
            window.mediaShareRoomSwiper = mediaShareRoomSwiper;
        }, 1000)

        layui.use(['layedit', 'form', 'layer', 'laytpl', 'upload'], function () {
            window.layer = layui.layer;
            window.$ = layui.$;
            window.layedit = layui.layedit;
            window.laytpl = layui.laytpl;
            window.upload = layui.upload;

            let alert = window.localStorage.getItem("tl-rtc-file-alert")
            if (!alert) {
                layer.open({
                    type: 1
                    , title: false
                    , closeBtn: false
                    , area: '300px;'
                    , shade: 0.8
                    , id: 'layui-info-msg'
                    , btn: ['知道了', "不再提示"]
                    , btnAlign: 'c'
                    , moveType: 1
                    , content: `
                        <div style="padding: 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">
                            <div style="text-align: center;line-height: 20px;font-size:12px;word-break: keep-all;">当前项目代码已完整开源，推荐自行搭建
                                <a style="color: #e87171;font-size:15px;font-weight: 800; text-decoration: underline;" 
                                href="https://github.com/iamtsm/tl-rtc-file" target="_blank"> 去github点个赞支持下 </a>    
                            </div>
                            <div style="text-align: center;line-height: 40px;">1. 双方输入相同房间号加入</div>
                            <div style="text-align: center;line-height: 40px;"><b>* 双方先加入房间再选文件! *</b></div>
                            <div style="text-align: center;line-height: 40px;">2. 双方选择需要的文件发送</div>
                            <div style="text-align: center;line-height: 40px;">3. 右下角是你接收到的文件</div>
                            <div style="text-align: center;line-height: 40px;">4. 左下角是你发送过的文件</div>
                            <div style="text-align: center;line-height: 26px;word-break: keep-all;color: #e87171;">5. 中继服务器配置带宽不高，大约500kb/s ~ 600kb/s，（有需要可 <a style="color: wheat;" target="_blank" href="https://blog.iamtsm.cn">联系我</a> 提高带宽） （如果双方网络不支持p2p，才会走中继服务器，局域网或者支持p2p的网络是不限速的）</div>
                        </div>
                    `
                    , success: function (layero) {

                    },
                    btn2: function (index, layero) {
                        window.localStorage.setItem("tl-rtc-file-alert", true)
                    }
                });
            }
        });
    </script>
</body>
</html>